<template>
  <div class="hello">
    login
    <div @click="sendMyData()">点击去调用android</div>
    <div>{{androidcallback}}</div>
    <div>{{androidcallback2}}</div>
    <div class="testrem">测试rem</div>
  </div>
</template>

<script>
export default {
  name: 'Login',
  data() {
    return {
      androidcallback:"a",
      androidcallback2:"c"
    }
  },
  created() {
    
  },
  ready : function(){ 
      
    
  },
  mounted () {
    this.$bridge.registerHandler("androidToJsTest", (data, responseCallback) => {
                console.log("android调用js");
                console.log(data);
                this.androidcallback2 = data;
                var responseData = "收到安卓数据";
                responseCallback(responseData);
            });
  },
  methods: {
    sendMyData() {
      console.log("---------------1111")
      console.log(this.$bridge)
      console.log(this)
      console.log(window)
      console.log(window.WebViewJavascriptBridge)
      this.androidcallback = "bbb";
        this.$bridge.callHandler(
                'submitFromWeb'
                , {'param': '中文测试'}
                , responseData => {
                    console.log("js调用android函数，android又返回的数据--");
                    console.log(responseData);
                    this.androidcallback = responseData;
                }
            );
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.testrem {
  width: 9rem;
  height: 5rem;
  background-color: red;
}
</style>
